<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/commons/jsp-head.jsp"%>
<%@include file="/commons/html-head-easyui.jsp"%>

<script type="text/javascript" src="/js/etool/etool-menu.js"></script>


<ul id="etool_menu_edit" class="easyui-tree">
				<li><span>Folder</span>
					<ul>
						<li><span>Sub Folder 1</span>
							<ul>
								<li><span>File 11</span>
								</li>
								<li><span>File 12</span>
								</li>
								<li><span>File 13</span>
								</li>
							</ul>
						</li>
						<li><span>File 2</span></li>
						<li><span>File 3</span></li>
					</ul>
				</li>
				<li><span>File21</span></li>
</ul>
<div id="mm" class="easyui-menu" style="width:120px;">
	<div onclick="append()" data-options="iconCls:'icon-add'">Append</div>
	<div onclick="insert('before')" data-options="iconCls:'icon-add'">insert(before)</div>
	<div onclick="insert('after')" data-options="iconCls:'icon-add'">insert(after)</div>
	<div onclick="remove()" data-options="iconCls:'icon-remove'">Remove</div>
</div>
<script>
$('#etool_menu_edit').tree({
	onContextMenu: function(e, node){
		e.preventDefault();
		// select the node
		$('#etool_menu_edit').tree('select', node.target);
		// display context menu
		$('#mm').menu('show', {
			left: e.pageX,
			top: e.pageY
		});
	}
});


append=function()
{
	var selected = $('#etool_menu_edit').tree('getSelected');
	$('#etool_menu_edit').tree('append', {
		parent: selected.target,
		data: [{
			id: 23,
			text: 'node23',
			url:'index.do'
		},{
			text: 'node24',
			state: 'closed',
			url:'index.do',
			children: [{
				text: 'node241'
			},{
				text: 'node242'
			}]
		}]
	});	
}

insert=function(type)
{
	
	var node = $('#etool_menu_edit').tree('getSelected');
	if (node){
		if(type=="before")
		{
		$('#etool_menu_edit').tree('insert', {
			before: node.target,
			data: {
				id: 21,
				text: 'node text'
			}
		});
		}
		else{
		$('#etool_menu_edit').tree('insert', {
			after: node.target,
			data: {
				id: 21,
				text: 'node text'
			}
		});
		}
	}
}

remove=function()
{
	var node = $('#etool_menu_edit').tree('getSelected');
	if (node){
		$('#etool_menu_edit').tree('remove', node.target);
	}
}
</script>